import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';

import { Table, Switch, Button, Pagination, Dialog } from '@alifd/next';
import IceContainer from '@icedesign/container';
import '@alifd/next/dist/next.css';

const enabledStatusOnChange = (checked) => {
  alert(checked);
  console.log( `switch to ${checked}`)
}

class AppUserTable extends PureComponent {
  renderAppUserEnabledStatus = (enabledStatus) => {
    return (
      <Switch
        defaultChecked={enabledStatus}
        onChange={this.props.changeEnabled}
        checkedChildren="enable"
        unCheckedChildren="disable"
        style={styles.largeWidth}
      />
    );
  }

  render() {
    const { appUserData, isLoading, current, dialogData, dialogVisible } = this.props;
    return (
      <IceContainer title="用户列表">
        <Table loading={isLoading} dataSource={appUserData}>
          <Table.Column title="用户编号"  dataIndex="id" width={100} />
          <Table.Column title="用户昵称" dataIndex="username" width={100} />
          <Table.Column title="真实姓名" dataIndex="realName" width={150} />
          <Table.Column title="手机号码" dataIndex="phone" width={150} />
          {/* dataIndex="enabled"  */}
          <Table.Column 
            title="是否有效" 
            width={80}
            cell={(item, index, record) => {
              return (
                <Switch
                  defaultChecked={record.enabled}
                  onChange={(checked) => this.props.changeEnabled(checked, record.id)}
                  checkedChildren="enable"
                  unCheckedChildren="disable"
                  style={styles.largeWidth}
                />
              )
            }} 
          />
          <Table.Column
            title="操作"
            width={50}
            cell={(item, index, record) => {
              return (
                <Button onClick={() => this.props.onOpen(record)} type="primary">
                  查看详情
                </Button>
              )
            }}
          />
        </Table>
        <Pagination 
          style={styles.pagination}
          current={current}
          onChange={this.handlePaginationChange}
        />
        <Dialog
          title={"您正在查看第"+dialogData.id+"号用户信息详情"}
          visible={dialogVisible}
          onOk={this.props.onClose}
          onClose={this.props.onClose}
          onCancel={this.props.onClose}
        >
          <IceContainer>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>用户ID</div>
              <div style={styles.infoDetail}>{dialogData.id}</div>
            </div>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>用户昵称</div>
              <div style={styles.infoDetail}>{dialogData.username}</div>
            </div>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>真实姓名</div>
              <div style={styles.infoDetail}>{dialogData.realName}</div>
            </div>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>联系电话</div>
              <div style={styles.infoDetail}>{dialogData.phone}</div>
            </div>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>性别</div>
              <div style={styles.infoDetail}>{dialogData.sex === 1 ? '男' : '女'}</div>
            </div>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>加入时间</div>
              <div style={styles.infoDetail}>{dialogData.createTime}</div>
            </div>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>钱包地址</div>
              <div style={styles.infoDetail}>{dialogData.walletAddress}</div>
            </div>
            <div style={styles.infoRow}>
              <div style={styles.infoLabel}>是否有效</div>
              <div style={styles.infoDetail}>
                <Switch
                  defaultChecked={dialogData.enabled === '0' ? false : true}
                  onChange={enabledStatusOnChange}
                  checkedChildren="enable"
                  unCheckedChildren="disable"
                  style={styles.largeWidth}
                />
              </div>
            </div>
          </IceContainer>
        </Dialog>
      </IceContainer>
    );
  }

  // 从后台获取数据 http://localhost:9080/users?start=0&length=10
  componentDidMount() {
    this.props.getAppUserData();
  }
}

const styles = {
  status: {
    position: 'relative',
    paddingLeft: '20px',
  },
  dot: {
    width: '10px',
    height: '10px',
    position: 'absolute',
    left: '0',
    top: '2px',
    borderRadius: '50%',
  },
  largeWidth: {
    width: '80px',
  },
  pagination: {
    marginTop: '20px',
    textAlign: 'right',
  },
  infoRow: {
    padding: '16px 0',
    display: 'flex',
    borderBottom: '1px solid #f6f6f6',
  },
  infoLabel: {
    flex: '0 0 100px',
    color: '#999',
  },
  infoDetail: {
    width: '400px',
    height: 'auto',
  },
};

const mapState = (state) => ({
  current: state.AppUser.get('current'),
  isLoading: state.AppUser.get('isLoading'),
  appUserData: state.AppUser.get('appUserData').toJS(),
  dialogVisible: state.AppUser.get('dialogVisible'),
  dialogData: state.AppUser.get('dialogData').toJS()
});

const mapDispatch = (dispatch) => ({
  getAppUserData() {
    dispatch(actionCreators.getAppUserData());
  },
  onOpen(record) {
    dispatch(actionCreators.onOpen(record));
  },
  onClose() {
    dispatch(actionCreators.onClose());
  },
  changeEnabled(checked, id) {
    // console.log(checked, id);
    dispatch(actionCreators.changeEnabled(checked, id));
  }
});

export default connect(mapState, mapDispatch)(AppUserTable);